<template>
  <div class="article-list-show" v-loading.fullscreen.lock="loading"
        element-loading-text="文章加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
      <div v-for="item in articleList" style="margin: 10px 10px;" :key="item.id"  >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{item.title}}</span>
            <span>
              <el-button style="padding: 3px 1px;" type="text">编辑</el-button>
              <el-button style="padding: 3px 1px" type="text" @click="deleteArticle(item.id)">删除</el-button>
              <el-button style="padding: 3px 1px" type="text" @click= "getArticleId(item.id)">游览</el-button>
            </span>
          </div>
          <!-- <router-link :to="'/article/'+item.id"> -->
            <img :src="item.coverImg"  style="width: 100%;overflow: hidden;height: 150px;"/>
          <!-- </router-link> -->
          <span class="infoShow">
            <el-link type="success" :underline="false"><i class="iconfont">&#xe664;</i> 点赞: {{item.likeNum}}</el-link>
            <el-link type="success" :underline="false"><i class="iconfont">&#xe613;</i> 收藏: {{item.collectNum}}</el-link>
            <el-link type="success" :underline="false"><i class="iconfont">&#xe912;</i> 游览: {{item.viewsCount}}</el-link>
            <el-link type="success" :underline="false"><i class="iconfont">&#xe611;</i> 评论: {{item.commentNum}}</el-link>
          </span>
        </el-card>
      </div>
    </div>

    <!-- 如果没有内容就更换背景 -->
    <img src="../../../../static/articleShowBack.png" v-show="isShow"  style="width: 100%;"/>
  </div>
</template>

<script>
  import API from '@/api/user'
  import mixins from '@/mixins'
  export default{
    mixins:[mixins],
    data(){
      return{
        isShow:false,
        articleList:[],
        // 加载数据前为true
        loading:true
      }
    },
    methods:{
      getArticleList(uid){
        API.getAllArticle(uid).then(res => {
          this.loading = false
          this.articleList = res.data
          if(res.data.length === 0){
            this.isShow = true
          }
        })
      },
      deleteArticle(id){
        this.$confirm('确定删除?', '温馨提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行数据库操作
          API.deleteArticleById(id).then(res => {
            // 删除list中的相应数据
            if(res.data.isSuccess){
              this.$message({
                  type: 'success',
                  message: '删除成功！',
                  duration: 1000,
                  showClose: true,
                  center: true
              });

              // 更新数据，根据文章list存储的数据，根据文章id来删除,然后重新渲染
              for(var i=0;i<this.articleList.length;i++){
                if(this.articleList[i].id === id){
                  this.articleList.splice(i,1);
                }
              }
            }else{
              this.$message({
                  type: 'error',
                  message: '删除失败！',
                  duration: 1000,
                  showClose: true,
                  center: true
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            center: true
          });
        })
      },
      getArticleId(id){
        // this.SetArticleId(id)
        // alert("list"+id)
        this.$router.push({
          path:"/user/article/"+id
        })
      },

    },
    created() {
      this.getArticleList(this.UserInfo.id)
      // alert(document.body.clientWidth-200)
    },
    destroyed() {
        // getArticleId()
    }
  }
</script>

<style scoped="scoped">
  .article-list-show{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
.clearfix span:nth-child(1){
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clearfix span:nth-child(2){
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.clearfix{
  display: flex;
  justify-content: space-between;
}
  .box-card {
    max-width: 365px;
    /* min-width: 350px; */
  }
  .el-card__body{
    padding: 0px;
  }
  .infoShow{
    display: flex;
    justify-content: space-around;
    background-color: #FFFFFF;
  }

  .infoShow a{
    display: block;
    margin: 3px 1px;
    color: #909399;
    margin-top: 10px;
  }
/*  .infoShow a:hover{
    color: #F55134;
  } */
</style>
